* {
    padding: 0;
    margin: 0;
}

html,
body {
    height: 100%;
}


/* 颜色 */
.deep-blue{
    background-color: #201d2e;
    background-size: 100%;
}
.gray{
    background-color: #eee;
}
.light{
    background-color: #fff;
}

.title-dark{
    font-size: 24px;
    line-height: 30px;
    color: #333;
    margin:  10px auto;
}
.title-light{
    font-size: 24px;
    line-height: 30px;
    color: #fff;
    margin:  10px auto;
}


.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-cover {
    /* background: red; */
}



/* 下一页箭头样式 */
#nextbtn{
    position: absolute;
    width: 30px;
    bottom: 20px;
    left: 50%;
    z-index: 100;
    text-align: center;
    margin-left: -15px;
    animation: sliceToUp 1s linear infinite;
}

#nextbtn>img{
    width: 30px;
}

@keyframes sliceToUp{
    0%{
        transform: translateY(30px);
        opacity: 1;
    }
    100%{
        transform: translateY(0px);
        opacity: 0;
    }
}


/* 音乐图标 */
#music_icon{
  width: 30px;
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
  /* background-color: red; */
}

.icon-ani{
  -webkit-animation:icon-rotate 3s linear infinite;
 
}
.icon-ani-pause{
    animation-play-state: paused;
}

@-webkit-keyframes icon-rotate{
 
  0%{-webkit-transform:rotate(0deg);}

  25%{-webkit-transform:rotate(90deg);}

  50%{-webkit-transform:rotate(180deg);}

  75%{-webkit-transform:rotate(270deg);}

  100%{-webkit-transform:rotate(360deg);}
}